<!--
 * @Author: zi.yang
 * @Date: 2021-09-29 00:13:21
 * @LastEditors: zi.yang
 * @LastEditTime: 2021-10-09 08:39:59
 * @Description: In User Settings Edit
 * @FilePath: \one.pm\src\views\User\UserList.vue
-->
<template>
  <b-container fluid>
    <b-row>
      <b-col sm="12">
        <iq-card>
          <template v-slot:headerTitle>
            <h4 class="card-title">用户列表</h4>
          </template>
          <template v-slot:headerAction>
            <b-button variant="primary" :to="{ name: 'user.add' }">添加用户</b-button>
          </template>
          <template v-slot:body>
            <ag-grid-vue
              id="ag-grid"
              class="ag-theme-material border height-500"
              :columnDefs="columnDefs"
              :rowData="userListState"
              :floatingFilter="true"
              :modules="modules"
              rowSelection="multiple"
            ></ag-grid-vue>
          </template>
        </iq-card>
      </b-col>
    </b-row>
  </b-container>
</template>
<script>
import 'ag-grid-community/dist/styles/ag-grid.min.css'
import 'ag-grid-community/dist/styles/ag-theme-material.css'
import { AllCommunityModules } from '@ag-grid-enterprise/all-modules'
import { core } from '../../config/pluginInit'
import { AgGridVue } from 'ag-grid-vue'
import ActionUser from './Components/ActionUser'
import { mapActions, mapGetters } from 'vuex'
export default {
  name: 'UserList',
  mounted () {
    core.index()
  },
  data () {
    return {
      columnDefs: null,
      rowData: [],
      modules: AllCommunityModules
    }
  },
  components: {
    AgGridVue,
    // eslint-disable-next-line vue/no-unused-components
    ActionUser
  },
  beforeMount () {
    this.columnDefs = [
      { headerName: '用户名', field: 'username', sortable: true, filter: 'agTextColumnFilter' },
      { headerName: '真实姓名', field: 'realname', sortable: true, filter: true },
      { headerName: '邮箱', field: 'email', sortable: true, filter: true },
      { headerName: '电话', field: 'phone', sortable: true, filter: true },
      { headerName: '角色', field: 'role_id', sortable: true, filter: true },
      { headerName: '用户状态', field: 'status', sortable: true, filter: true },
      { headerName: '操作', cellRendererFramework: ActionUser }
    ]
    this.FetchFindAllUser().then(this.FetchFindAllUserSuccess).catch(this.FetchFindAllUserError)
  },
  methods: {
    ...mapActions('User', ['FetchFindAllUser']),
    FetchFindAllUserSuccess () {
      // pass
    },
    FetchFindAllUserError (err) {
      this.$message.error(err?.msg || err)
    }
  },
  computed: {
    ...mapGetters({ userListState: 'User/userListState' })

  }
}
</script>
